<template>
	<view class="">
		<NavBar title="待审核" :isShowLeftBtn="false">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: viewHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list" v-if="orderList.length>0">
					<view class="main_item m_b_26" v-for="(item,index) in orderList" :key="index"
						@click="onClickOrderItem(item)">
						<view class="">
							<view class="" style="width: 620rpx;">
								<text class="f_26_0 u-line-1">
									订单编号：{{item.order_no}}
								</text>
							</view>
							<view class="" style="width: 620rpx;">
								<text class="f_26_0">
									送货地址：{{item.delivery_address}}
								</text>
							</view>
							<view class="" style="width: 620rpx;">
								<text class="f_26_0 u-line-1">
									收货联系人：{{item.contact_name}}
								</text>
							</view>
							<view class="" style="width: 620rpx;">
								<text class="f_26_0 u-line-1">
									联系电话：{{item.contact_phone}}
								</text>
							</view>
						</view>
						<view class="hr m_t_20 m_b_14">

						</view>
						<view class="flex_both">
							<view class="">
								<text class="f_26_0" style="color: #FE172D;">
									{{item.orderStatus}}
								</text>
								<text class="f_24_0">（下单日期：{{item.create_time}}）</text>
							</view>
							<view class="">
								<text class="f_26_0" style="color: #3665FF;">
									查看更多 >
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&orderList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
		<view class="float_box">
			<view class=" float_item m_b_10" @click="onShowModal">
				<up-image src="/static/images/common/return.png" shape="circle" width="50rpx" height="50rpx"></up-image>
			</view>
		</view>
	</view>
	<Tabbar :activeTab="0"></Tabbar>
	<up-modal :show="modalShow" title="提示" content='即将退出登录,是否继续?' :showCancelButton="true" @confirm="onModalOk"
		confirm-text="是" can cancel-text="否" @cancel="onModalCancel"></up-modal>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	import Tabbar from "@/components/tabbar.vue"
	import { tabbarStore } from "@/stores/tabbar";
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const viewHeight = ref('')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76 + 100}rpx - env(safe-area-inset-bottom))`
				viewHeight.value = `calc(100vh - ${statusBarHeight.value + 76 + 100}rpx - env(safe-area-inset-bottom))`
			}
		});
	})
	onShow(() => {
		initList()
	})
	const initList = () => {
		loadMessage.value = '加载中'
		page.value = 1
		orderList.value = []
		getOrderList()
	}

	const activeType = ref(12)
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getOrderList()
		}, 1000)
	}
	const orderList = ref([])
	const getOrderList = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('salesMan.getOrderList', { page: page.value, type: activeType.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				orderList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	const onClickOrderItem = (e) => {
		uni.navigateTo({
			url: `/pages/finance/waitPaymentDetail?id=${e.id}`
		})
	}
	const modalShow = ref(false)
	const onShowModal = () => {
		modalShow.value = true
	}
	const onModalOk = () => {
		modalShow.value = false
		onReturn()
	}
	const onModalCancel = () => {
		modalShow.value = false
	}
	const tabbar = tabbarStore()
	const onReturn = () => {
		// 清除登录数据
		uni.removeStorageSync('token')
		uni.removeStorageSync('role')
		tabbar.curList = []
		uni.$u.toast('退出成功')
		setTimeout(() => {
			uni.reLaunch({
				url: "/pages/login/index"
			})
		}, 800)
	}

</script>
<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_action {
				display: flex;
				align-items: center;

				.main_action_item {
					width: 167rpx;
					height: 69rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						color: #000000;
					}
				}

				.main_action_active_item {
					width: 166rpx;
					height: 68rpx;
					background: #3665FF;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						color: #FFFFFF;
					}
				}
			}

			.main_list {
				.main_item {
					width: 654rpx;
					padding: 28rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 10rpx;
					border: 1px solid #EDEDEE;
				}
			}
		}

	}

	.float_box {
		position: fixed;
		right: 20rpx;
		bottom: calc(env(safe-area-inset-bottom) + 260rpx);
		z-index: 9;

		.float_item {
			width: 50rpx;
			height: 50rpx;
			padding: 16rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}
	}
</style>